<template>
  <div class="rightContent">
    <div class="dyglEcharts">
      <div class="col">
        <p class="title">发布会议</p>
        <div class="item">
          <img src="@/assets/images/meetingIcon.png" alt="" />
          <div class="option">
            <!--<h4>操作</h4>-->
            <button type="button" @click="openAdd">新增会议通知</button>
          </div>
        </div>
      </div>
      <div class="col">
        <h2>会议统计</h2>
        <conference-distribution :data="data"></conference-distribution>
      </div>
    </div>

    <el-table :data="tableData" @row-click="rowClick" style="width: 100%">
      <el-table-column type="index" width="120" align="center" label="序号">
      </el-table-column>
      <el-table-column prop="name" align="center" label="会议名称">
      </el-table-column>
      <el-table-column prop="time" align="center" label="会议时间">
      </el-table-column>
      <el-table-column prop="type" align="center" label="会议类型">
      </el-table-column>
      <el-table-column prop="personType" align="center" label="参会人员">
      </el-table-column>
      <el-table-column align="center">
        <template>
          <a href="javascript:;">详细 ></a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <meeting-name></meeting-name>
    </el-dialog>
    <div class="addWindows" v-show="addWindows">
      <div class="addBox">
        <h4>新增社区通知</h4>
        <div class="back">
          <a href @click.prevent="closeAdd">
            <img src="@/assets/images/images/icon_back.png" alt />
          </a>
        </div>
        <div class="addContentBox">
          <el-form ref="form" :model="noticeContent" :rules="formRules">
            <el-form-item class="title" prop="title">
              <el-input
                type="text"
                class="input"
                placeholder="请输入通知标题"
                style="font-size: 20px; text-align: center"
                v-model="noticeContent.title"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="addContent" prop="content">
              <el-input
                type="textarea"
                placeholder="请输入通知内容"
                style="font-size: 18px"
                resize="none"
                :rows="15"
                v-model="noticeContent.content"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="button">
          <button type="button" value="确定发布" @click="saveAdd">
            确定发布
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import meetingName from "@/components/partyBuilding/popup/meetingName";
import conferenceDistribution from "@/components/partyBuilding/echartsComponent/conferenceDistribution";
export default {
  name: "meetingsManagement",

  data() {
    return {
      data: {
        title: "会议发布",
        data: [
          {
            value: 35,
            name: "民主评议会",
            itemStyle: {
              color: "#e7b41d",
            },
          },
          {
            value: 40,
            name: "组织生活会",
            itemStyle: {
              color: "#ff1c4c",
            },
          },
          {
            value: 25,
            name: "全体党员",
            itemStyle: {
              color: "#0ce6ff",
            },
          },
        ],
      },
      tableData: [
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
        {
          time: "2016-05-02",
          name: "会议时间达营子村民主评议会",
          type: "党员活动室",
          personType: "全体党员",
        },
      ],
      dialogVisible: false,
      addWindows: false,
      modifyWindows: false,
      checkWindows: false,
      deleteWindows: false,
      popupVisible: false,
      role: false,
      listNull: false,
      title: "",
      noticeData: [],
      noticeContent: {
        title: "",
        content: "",
      },
      noticeMsg: {},
      formRules: {
        title: [{ required: true, message: "通知标题不能为空" }],
        content: [{ required: true, message: "通知内容不能为空" }],
      },
    };
  },
  components: {
    meetingName,
    conferenceDistribution,
  },
  mounted() {},

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    rowClick() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    saveAdd() {
      this.addWindows = false;
    },
    closeAdd() {
      this.addWindows = false;
      this.noticeContent.title = "";
      this.noticeContent.content = "";
    },
    openAdd() {
      this.addWindows = true;
    },
  },
};
</script>

<style scope="scope">
.dyglEcharts {
  height: 153px;
  margin-top: 90px;
  overflow: hidden;
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
}
.dyglEcharts .col {
  height: 100%;
}

.dyglEcharts .col:first-child {
  background: url("@/assets/images/eachartBg.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  font-size: 26px;
  color: #d4eaf6;
  display: flex;
  align-items: center;
  width: 32%;
}
.dyglEcharts .col:last-child {
  width: 67%;
  background: url("@/assets/images/hyglBg.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
}

.dyglEcharts .col:last-child h2 {
  position: absolute;
  top: -6px;
  left: 5px;
  font-size: 20px;
  color: #92d5ff;
}
.dyglEcharts .col:first-child .title {
  position: absolute;
  left: 5px;
  top: -6px;
  font-size: 20px;
  color: #92d5ff;
}
.dyglEcharts .col:first-child .item {
  display: flex;
  align-items: center;
}
.dyglEcharts .col:first-child .num {
  color: #e73851;
  font-size: 40px;
  margin-left: 33px;
}
.dyglEcharts .col:first-child img {
  width: 95px;
  margin-right: 46px;
  margin-left: 40px;
}

.option {
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 1;
}
.option h4 {
  font-size: 24px;
  font-weight: bold;
  color: #666;
}
.option h4::before {
  content: "";
  width: 7px;
  height: 26px;
  background: #8ca2d3;
  position: absolute;
  left: -10px;
  z-index: 1;
}
.option button {
  width: 260px;
  height: 60px;
  background: #8c8cd3;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  outline: none;
  border-width: 0px;
  border-radius: 15px;
  cursor: pointer;
  margin-top: 30px;
  margin-left: 150px;
}
.addBox,
.modifyBox,
.checkBox {
  width: 1000px;
  height: 100%;
  background: #fff;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.deleteBox {
  width: 634px;
  height: 234px;
  background: #fff;
  margin: 177px auto;
  position: relative;
}
.addBox h4,
.modifyBox h4,
.checkBox h4,
.deleteBox h4 {
  font-size: 24px;
  font-weight: bold;
  color: #8a79af;
  padding-top: 24px;
  margin-left: 70px;
  display: inline-block;
}
.deleteBox h4 {
  margin-left: 50px;
}
.addBox h4::before,
.modifyBox h4::before,
.checkBox h4::before,
.deleteBox h4::before {
  content: "";
  width: 7px;
  height: 26px;
  background: #8a79af;
  position: absolute;
  left: 40px;
  z-index: 1;
}
.deleteBox h4::before {
  left: 22px;
}
.addBox .back,
.modifyBox .back {
  position: absolute;
  left: 930px;
  top: 24px;
  z-index: 99;
}
.deleteBox .back {
  position: absolute;
  left: 580px;
  top: 24px;
}
.addContentBox,
.modifyContentBox,
.checkContentBox {
  width: 920px;
  height: 78%;
  margin: 20px auto;
  border: 1px solid #000;
  overflow: hidden;
}
.deleteContent {
  margin: 80px 242px;
  font-size: 20px;
}
.checkContentBox {
  overflow-y: scroll;
  position: relative;
}
.addBox .title,
.modifyBox .title,
.checkBox span {
  display: block;
  width: 300px;
  height: 25px;
  margin: 30px auto 50px;
  font-size: 24px;
  text-align: center;
}
.checkBox span::after {
  content: "";
  width: 90%;
  height: 1px;
  border: #bcbcbc 1px transparent;
  border-top: #666 1.5px dashed;
  position: absolute;
  top: 70px;
  left: 5%;
  z-index: 2;
}
.addBox .addContent,
.modifyBox .modifyContent {
  width: 850px;
  margin: 10px 33px;
  text-indent: 40px;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 30px;
}
.checkContentBox div {
  margin: 40px 30px;
  font-size: 20px;
}
.addBox .button,
.modifyBox .button,
.checkBox .button {
  margin-top: 20px;
  width: 100%;
  height: 15%;
  background: #bcbcbc;
  overflow: hidden;
}
.deleteBox ul {
  width: 100%;
  height: 58px;
  background: #bcbcbc;
}
.addBox button,
.modifyBox button,
.checkBox button {
  width: 143px;
  height: 43px;
  background: #8a79af;
  margin: 20px 420px;
  font-size: 20px;
  color: #fff;
  outline: none;
  border-width: 0px;
  border-radius: 10px;
  cursor: pointer;
}
.deleteBox .yes button {
  float: left;
  width: 120px;
  height: 39px;
  background: #8a79af;
  margin-left: 128px;
  margin-top: 9px;
  font-size: 18px;
  color: #fff;
  outline: none;
  border-width: 0px;
  border-radius: 10px;
  cursor: pointer;
}
.deleteBox .no button {
  float: right;
  width: 120px;
  height: 39px;
  background: #fff;
  margin-right: 166px;
  margin-top: 9px;
  font-size: 18px;
  color: #000;
  outline: none;
  border-width: 0px;
  border-radius: 10px;
  cursor: pointer;
}
.addWindows,
.modifyWindows,
.checkWindows,
.deleteWindows {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}
</style>
